<template>
  <x-layout bg-color="#33374d">
    <template #scroll>
      <view
        class="p-[150rpx_20rpx] flex flex-wrap gap-20rpx items-center justify-center h-100%"
      >
        <view
          v-for="(item,index) in list"
          :key="index"
          @click="openDetail(item,index)"
          class="relative w-155 h-180"
        >
          <view
            class="absolute top-0 right-0 left-0 bottom-0 z-2 flex flex-col border-rd-4rpx  justify-center items-center  bg-white text-28"
            style="border-bottom: 1px solid #b09da0;border-left: 1px solid #42373e;transform: translate(6rpx,-6rpx);"
          >
            <image
              :src="item.url"
              class="w-60 h-60"
            />
            <view> {{ item.name }}</view>
            <view
              class="text-24 mt-10rpx"
            >
              {{ item.day }}
            </view>
          </view>
          <view class="absolute top-0 right-0 left-0 bottom-0 z-1 border-rd-4rpx bg-#fec3c8 border border-solid border-#b396a1" />
        </view>
      </view>
    </template>
  </x-layout>
</template>

<script setup>
import { getImg } from '@/utils/tools.js'

const openDetail = (item, idx) => {
  uni.navigateTo({
    url: `/pages/horoscope/detail?day=${item.day}&type=${item.value}&color=${item.color}&index=${idx + 1}`
  })
}

const list = [
  { name: '白羊座', value: 'aries', day: '3.21~4.19', color: '#FFC0CB', url: getImg('xinzuo/img1.png') }, // 淡粉色
  { name: '金牛座', value: 'taurus', day: '4.20~5.20', color: '#FFFACD', url: getImg('xinzuo/img2.png') }, // 淡黄色
  { name: '双子座', value: 'gemini', day: '5.21~6.20', color: '#B0E0E6', url: getImg('xinzuo/img3.png') }, // 淡蓝色
  { name: '巨蟹座', value: 'cancer', day: '6.21~7.22', color: '#F0E68C', url: getImg('xinzuo/img4.png') }, // 十分淡黄色
  { name: '狮子座', value: 'leo', day: '7.23~8.22', color: '#FFECB3', url: getImg('xinzuo/img5.png') }, // 金色
  { name: '处女座', value: 'virgo', day: '8.23~9.22', color: '#AEDFF7', url: getImg('xinzuo/img6.png') }, // 淡绿色
  { name: '天秤座', value: 'libra', day: '9.23~10.22', color: '#FFA07A', url: getImg('xinzuo/img7.png') }, // 亮橙色
  { name: '天蝎座', value: 'scorpio', day: '10.23~11.21', color: '#C0A3C3', url: getImg('xinzuo/img8.png') }, // 紫色
  { name: '射手座', value: 'sagittarius', day: '11.22~12.21', color: '#87CEFA', url: getImg('xinzuo/img9.png') }, // 亮蓝色
  { name: '摩羯座', value: 'capricorn', day: '12.22~1.19', color: '#D2B48C', url: getImg('xinzuo/img10.png') }, // 淡褐色
  { name: '水瓶座', value: 'aquarius', day: '1.20~2.18', color: '#ADD8E6', url: getImg('xinzuo/img11.png') }, // 淡蓝色
  { name: '双鱼座', value: 'pisces', day: '2.19~3.20', color: '#87CEEB', url: getImg('xinzuo/img12.png') } // 粉红色
]
</script>

<style lang="scss" scoped>

</style>
